<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>04CSS단위및박스</title>
        <style type="text/css"> 
            #no1 { font-size: 2em}
            #no2 { font-size: 1.5em}
            #no3 { font-size: 1.125em}
            #no4 { font-size: 1em}
            
            #c01 { color: red}
            #c02 { color: green}
            #c03 { color: blue}
            
            #c04 { color: #FF0000}
            #c05 { color: #008000}
            #c06 { color: #0000FF}
            
            #c07 { color: rgb(255, 0, 0)}
            #c08 { color: rgb(0, 140, 0)}
            #c09 { color: rgb(0, 0, 255)}
            
            #c10, #c11, #c12 { width: 250px; height: 150px}
            #c10 { background: rgba(255,0,0,1)}             
            #c11 { background: rgba(255,0,0,0.5)}               
            #c12 { background: rgba(255,0,0,0.1)}           
            
            #bora01 { width: 550px; height: 800px; background-image: url("images/b2.jpg")}  
            
            /*#b01, #b02, #b03, #b04, #b05*/ .boxclass { width: 250px; height: 150px}
            #b01 {background: yellow; margin: 10px; padding: 10px; border: 3px solid red;}
            #b02 {background: rgba(255,0,0,0.5); margin: 20px 15px; padding: 10px 15px; border: 3px solid blue;}
            #b03 {background: orange; margin: 5px 10px 15px 20px; padding: 5px 10px 15px 20px; border: 3px solid navy;}
                                                        /*  상    좌     하     우*/        
            #b04 {background: orange; margin: 5px 10px 15px 20px; padding: 5px 10px 15px 20px; border: 3px solid navy;}
            #b05 {background: navy; color: white; border: 3px dashed red;}
            
            #b06 { border: thick dotted blue; border-radius: 15px}
            #b07 { border: thin groove orange
            ; border-radius: 15px 20px 25px 30px}
            
        </style>
    </head>
    <body>
        <h1>CSS단위박스테두리</h1>
        <h2>CSS크기단위</h2>
        <p id="no1">H1 태그 기본 크기는 32px, 200%, 2em</p>
        <p id="no2">H2 태그 기본 크기는 24px, 150%, 1.5em</p>
        <p id="no3">H3 태그 기본 크기는 18px, 133%, 1.125em</p>
        <p id="no4">body 태그 기본 크기는 16px, 100%, 1em</p>
        <hr />
        <h2>색상 단위</h2>
        <p>색상이름 color name : 
            <span id="c01">red</span>
            <span id="c02">green</span>
            <span id="c03">blue</span>
            </p>
        <p>16진수 코드 hex code :
            <span id="c04">red</span>
            <span id="c05">green</span>
            <span id="c06">blue</span>
            </p>
        <p>RGB 색상값 : 
            <span id="c07">red</span>
            <span id="c08">green</span>
            <span id="c09">blue</span>
        </p>
        <div id="c10">투명도 rgba()</div>
        <div id="c11">투명도 rgba()</div>
        <div id="c12">투명도 rgba()</div>
        <hr />
        <h2>URL 단위</h2>
        <div id="bora01">&nbsp;</div>       
        <hr />
        
        <h2>CSS 박스모델 특성</h2>
        <p id="b01" class="boxclass">모든 html 요소들은 박스로 인식될 수 있음</p>
        <p id="b02" class="boxclass">html 요소에 적용된 박스는 다음의 특성이 존재함 : 안쪽/바깥쪽 여백, 테두리</p>
        <p id="b03" class="boxclass">박스의 크기는 width, height로 지정</p>
        <p id="b04" class="boxclass">박스의 여백은 margin, padding으로 지정</p>
        <p id="b05" class="boxclass">박스의 테두리는 border로 지정</p>
        <p>CSS 박스모델로 컨텐츠를 배치하다 보면 margin 병합현상이 발생됨<br />
            두 박스를 수직으로 배치하는 경우 각 박스의 margin 중 가장 큰 값으로 적용</p>
        <hr />
        
        <h2>CSS 테두리</h2>
        <p id="b06">테두리 두께, 테두리 종류, 테두리 색깔</p>  
        <p id="b07">CSS3에 추가된 border-radius 는 사각형 모서리를 둥글게 만들수 있게 해줌</p>
        <hr />
        
        <h2>박스 그림자 : box-shadow</h2>
        <p style="width: 300px; height: 200px; background: orange; text-shadow: 5px 5px 5px black"> </p>
        <hr />
        
        <h2>그라디언트 : gradient</h2>
        <p style="width: 350px; height: 200px; background: linear-gradient( 135deg, #FFFFFF 0%, #000000 100%)"> </p>
        <p style="width: 350px; height: 200px; background: linear-gradient( red, blue )"> </p>
        <p style="width: 350px; height: 200px; background: linear-gradient(to bottom right, orange, brown)"> </p>
        <p style="width: 350px; height: 200px; background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)"> </p>
        <p style="width: 350px; height: 550px; background: linear-gradient(red, orange, yellow, green, blue, indigo, violet)"> </p>
    </body>
</html>